<template>
  <div>
    <header-top title="学生成绩查询" >
      <div @click="$router.back(-1)" class="back" slot="back"></div>
    </header-top>
    <div style="background: #f2f2f2" class="content clearfix">
      <ul class="studentExam">
        <li @click="showSelect" class="select">
          {{className}}
        </li>
        <li class="text">
          <input type="text" placeholder="学生姓名"  v-model="params.studentName">
        </li>
      </ul>
<!--      <router-link :to="{path:'/class/exam/studentExamDetail',query:{id:classId,student:student}}">-->
        <button @click="checkExam" class="button" >查询</button>

      <div v-if="show" class="zz"></div>
      <van-picker
        class="fixedBottom"
        v-if="show"
        show-toolbar
        title="选择班级"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
        :default-index=index
      />
    </div>
  </div>
</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import { Toast } from 'vant';   //使用消息提示

  export default {
    name: "studentExam",
    components:{
      headerTop:headerTop,
    },
    data(){
      return{
        className:'选择班级',
        show:false,
        columns: [{text:'选择班级',classId:null,gradeId:null}],
        params:{
          classId:null,
          gradeId:null,
          studentName:null,
        },
        index:0,

      }
    },
    mounted(){
      this.params = this.$route.query
      let classList = this.$store.state.teacherClass
      for(let item of classList) {
        this.columns.push({text:item.gradeClassName,classId:item.id,gradeId:item.gradeId})
      }



    },
    methods: {
      showSelect(){
        this.show = true;
      },
      onCancel() {
        this.show = false
      },
      onConfirm(value,index){
        this.className = value.text
        this.params.classId = value.classId
        this.show = false
        this.index = index
        this.params.gradeId = value.gradeId
      },
      checkExam(){
        if(!this.params.classId){
          Toast('请选择班级')
          return
        }else{
          this.$router.replace({path:'/class/exam/studentExam/list',query:this.params})
        }

      }



    }
  }

</script>

<style scoped>
  .studentExam{ margin-top: 0.5rem; background: #fff;}
  .studentExam .select{width: 100%; height: 3.5rem; line-height: 3.5rem;  padding-left: 1rem; box-sizing: border-box; font-size: 1.1rem; color: #666;
    background:url("./images/studentExamIcon.png") no-repeat 25rem center; background-size: 0.5rem auto; border-bottom: 1px solid #f8f8f8 }
  .text{width: 100%; height: 3.5rem; line-height: 3.5rem; box-sizing: border-box; font-size: 1.1rem; color: #666;border-bottom: 1px solid #f8f8f8  }
  .text input{width: 100%; box-sizing: border-box; padding-left: 1rem; font-size: 1.1rem; height: 3.5rem; line-height: 3.5rem;}
  .button{width: 25rem; height: 2.9rem; line-height: 2.9rem; text-align: center; margin: 1.7rem auto 0; display: block; background: #00c08c; border: none; font-size:1.1rem; color: #fff; }
  .text input::-webkit-input-placeholder{
    color:#666;

  }
  .text input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#666;
  }
  .text input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#666;
  }
  .text input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#666;
  }

</style>
